<template>
  <div class="im">
    <div class="title">
      <van-row>
        <van-col span="8">
          <img class="user-img" :src="avatar" />
        </van-col>
        <van-col span="8">
          <p>{{getActive}}</p>
        </van-col>
        <van-col span="8">
          <van-icon name="plus" color="#1989fa" @click="isSheetShow = true" size="20px" class="gd" />
        </van-col>
      </van-row>
    </div>
    <van-search shape="round" input-align="center" placeholder="搜索" />

    <div class="compote-box">
      <Chat v-show="active == 0"></Chat>
    </div>

    <div class="compote-box">
      <Contacts v-show="active == 1"></Contacts>
    </div>

    <div class="compote-box" style="margin-top: -10px;">
      <Dynamic v-show="active == 2"></Dynamic>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="chat-o" info="20">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" dot>联系人</van-tabbar-item>
      <van-tabbar-item icon="more-o" dot>动态</van-tabbar-item>
    </van-tabbar>

    <van-action-sheet v-model="isSheetShow" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import Chat from "../components/index/chat";
import Contacts from "../components/index/contacts";
import Dynamic from "../components/index/dynamic";

export default {
  name: "index",
  components: {
    Chat,
    Contacts,
    Dynamic
  },
  data() {
    return {
      avatar: "",
      active: 0,
      title: ["消息", "联系人", "动态"],
      isSheetShow: false,
      actions: [
        { name: "创建群聊", router: "" },
        { name: "加好友/群", router: "/add-first" }
      ]
    };
  },
  created() {
    this.GetMyFriends();
    var userinfo = this.STORAGE.getObj("userinfo");
    this.avatar = userinfo.avatar;
    this.ws.createWs();
  },
  computed: {
    //获得当前title
    getActive() {
      return this.title[this.active];
    }
  },
  methods: {
    onSelect(item) {
      this.isSheetShow = false;
      //跳转
      this.$router.replace({
        path: item.router
      });
    },
    //获取我的好友
    GetMyFriends() {
      var vm = this;
      this.$axios
        .get("/contacts/my-friend")
        .then(res => {
          var result = res.data;
          if (result.code == 0) {
            //好友数据已存在不更新local
            var fr = vm.STORAGE.getObj("friends");
            if (fr != null) {
              vm.$store.dispatch("update", fr);
            } else {
              vm.STORAGE.setObj("friends", result.data);
              vm.friendInit(result.data);
            }
          } else {
            vm.$toast(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //好友数据结构初始化
    friendInit(data) {
      var d = [];
      data.forEach(e => {
        var newData = e;
        newData.content = "";
        newData.date = "";
        newData.list = [];
        d.push(newData);
      });
      this.$store.dispatch("update", d);
    }
  }
};
</script>

<style scoped lang="less">
.title {
  width: 100%;
  height: 55px;
  background: white;

  .user-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 20px;
    margin-top: 10px;
  }

  p {
    text-align: center;
    color: #1989fa;
  }

  .gd {
    margin-top: 15px;
    float: right;
    margin-right: 20px;
  }
}
</style>
